<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.Vue监测数据改变的原理_数组</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--  准备好一个容器  -->
    <div id="root">
        <h2>学校名称:{{school.name}}</h2>
        <h2>学校地址:{{school.address}}</h2>
        </hr>
        <button @click="addSex">点我添加性别</button>
        <h2>名称:{{student.name}}</h2>
        <h2 v-if="student.sex != null">性别:{{student.sex}}</h2>
        <h2>年龄:真实{{student.age.rAge}},对外{{student.age.wAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}-{{f.age}}
            </li>
        </ul>
        <h2>爱好</h2>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>

    </div>
</body>

<script type="text/javascript">
    const  vm = new Vue({
        el:'#root',
        data:{
            school:{
                name:'尚硅谷',
                address:'北京'
            },
            student:{
                name:'why',
                age:{
                    rAge:18,
                    wAge:20
                },
                friends:[
                    {name:'kobe',age:18},
                    {name:'james',age:24},
                    {name:'curry',age:10}
                ],
                hobby:['编程','发呆','喝水']
            }
        },
        methods:{
            addSex(){
                // Vue.set(this.student,'sex' , '男')
                this.$set(this.student,'sex' , '男')
            }
        }
    })
</script>
</html>